.fx-count-scroll {
  overflow: hidden;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  color: $font-color-important;
}

.fx-count-scroll-item {
  position: relative;
  flex: 1;

  > li {
    position: absolute;
    left: 0;
    top: 0;

    &.scroll-up-enter-active {
      transform: translateY(0);
      transition: all 0.3s ease;
    }

    &.scroll-up-leave-active {
      transform: translateY(-100%);
      transition: all 0.3s ease;
    }

    &.scroll-up-enter-from {
      transform: translateY(100%);
    }

    &.scroll-up-leave-to {
      transform: translateY(-100%);
    }

    &.scroll-down-enter-active {
      transform: translateY(0);
      transition: all 0.3s ease;
    }

    &.scroll-down-leave-active {
      transform: translateY(100%);
      transition: all 0.3s ease;
    }

    &.scroll-down-enter-from {
      transform: translateY(-100%);
    }

    &.scroll-down-leave-to {
      transform: translateY(100%);
    }
  }
}
